<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
					<div>
						<div class="searchArea">
							<div class="searchArea1">
								<el-row >
									<el-col :span="7">
										<el-input v-model="query.name" placeholder="任务名称"/>
									</el-col>
									<el-col :span="3">
										<el-button type="primary" @click="loadData()">搜索</el-button>
									</el-col>
								</el-row>
							</div>
							<div>
								<el-row>
									<el-col :span="6">
										<el-select v-model="query.status" clearable placeholder="任务状态" >
											<el-option
											v-for="status in taskStatus"
											:key="status.label"
											:value="status.value"
											:label="status.label">
											</el-option>
										</el-select>
									</el-col>
                  <el-col :span="6">
                    <el-select v-model="query.parentId" clearable placeholder="任务类型">
                      <el-option
                        v-for="type in taskTypesParent"
                        :key="type.label"
                        :value="type.value"
                        :label="type.label">
                      </el-option>
                    </el-select>
                  </el-col>
									<el-col :span="3">
										<el-button type="primary" @click="loadData()">确定</el-button>
									</el-col>
								</el-row>
							</div>
						</div>

						<div>
							<el-table
								:data="taskData"
								style="width: 100%"
								:row-class-name="tableRowClassName">
								<el-table-column
								prop="behaviorId"
								label="任务编号"
								width="300">
								</el-table-column>
								<el-table-column
								prop="parentId"
								label="任务类型">
								    <template slot-scope="scope">
										<span>{{ taskTypesParent[scope.row.parentId-1].label }}</span>
									</template>
								</el-table-column>
								<el-table-column
								prop="name"
								label="任务名称">
								</el-table-column>
								<el-table-column
								prop="status"
								label="任务状态">
									<template slot-scope="scope">
										<span>{{ taskStatus[scope.row.status-1].label }}</span>
									</template>
								</el-table-column>
								<el-table-column
								prop="handler"
								label="操作">
								    <template slot-scope="scope">
										<el-button @click="viewTask(scope.row)" type="text" size="small">查看</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>

            <div class="block paginationStyle">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.pageNo"
                :page-sizes="[20,40,100]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="query.totalSize">
              </el-pagination>
            </div>

					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../Navigation'
	import BreadCrumb from '../BreadCrumb'
	export default{
		name:'TaskList',
		methods: {
			tableRowClassName({row, rowIndex}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			},
			viewTask(row){
				this.$router.push('/task/'+row.behaviorId);
			},
      handleSizeChange(val){
        this.query.pageSize = val;
        this.loadData();
      },
      //当前第几页
      handleCurrentChange(val){
        this.query.pageNo = val;
        this.loadData();
      },
			loadData(){
			  //加载分页方法
        var that = this;
        this.$api.post('task/page',that.query,function(data){
          if(data.flag=="success"){
            that.query.totalSize = data.data.total;
            that.taskData = data.data.records;
          }else{
            this.$message.error(data.msg);
          }
        });
			}
		},
		mounted(){
			this.loadData();
		},
		data:function(){
			return {
				query:{
					name:"",
					status:"",
          parentId:"",
					type:"",
          pageNo:1,
          pageSize:40,
          totalSize:0
				},
        taskLev1:"",
				navs:["打卡任务管理","任务列表"],
				taskStatus:this.GLOBAL.taskStatus,
				taskTypesParent:this.GLOBAL.taskTypesParent,
        taskTypes:[],
				taskData:[]
			}
		},
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>

	.searchArea1{
		margin-bottom: 10px;
	}
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-input{
	width: 220px !important;
  }

  .paginationStyle{
    margin-top: 15px;
    float:right;
  }
</style>
